<template>
  <div class="directory">
    <!-- 一级 -->
    <div class="directory-item ml15" v-if="sectionLevel == 1">
      <directoryItem
        :liveType="liveType"
        :item="item"
        v-for="(item, index) in sectionList"
        :key="index"
        :classId="classId"
        v-bind="$attrs"
      ></directoryItem>
    </div>
    <!-- 二级 -->
    <el-collapse
      class="ml15"
      icon="el-icon-s-flag"
      v-else-if="sectionLevel == 2"
      v-loading="loading"
      element-loading-spinner="el-icon-loading"
    >
      <el-collapse-item
        :name="item.id"
        class="directory-item"
        v-for="(item, index) in sectionList"
        :key="index"
        @click.native="handleSectionChange(sectionLevel, index)"
      >
        <div slot="title" class="directory-title">{{ item.title }}</div>
        <directoryItem
          :liveType="liveType"
          :item="subItem"
          v-for="(subItem, index) in item.child"
          :key="index"
          :classId="classId"
          v-bind="$attrs"
        ></directoryItem>
      </el-collapse-item>
    </el-collapse>
    <!-- 三级 -->
    <template v-else-if="sectionLevel == 3">
      <el-collapse
        class="ml15"
        accordion
        icon="el-icon-s-flag"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
      >
        <el-collapse-item
          :name="item.id"
          class="directory-item"
          v-for="(item, index) in sectionList"
          :key="index"
          @click.native="handleSectionChange(2, index)"
        >
          <div slot="title" class="directory-title">
            {{ item.title }}
          </div>
          <el-collapse class="ml15" accordion icon="el-icon-s-flag">
            <el-collapse-item
              :name="subItem.id"
              class="directory-item"
              v-for="(subItem, subIndex) in item.child"
              :key="subIndex"
              @click.native="handleSectionChange(3, index, subIndex)"
            >
              <div slot="title" class="directory-title">
                {{ subItem.title }}
              </div>
              <directoryItem
                :liveType="liveType"
                :item="grandItem"
                v-for="(grandItem, grandIndex) in subItem.child"
                :key="grandIndex"
                :classId="classId"
                v-bind="$attrs"
              ></directoryItem>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </template>
    <!-- 没有内容 -->
    <edu-no-data v-else></edu-no-data>
  </div>
</template>

<script>
import DirectoryItem from './courseDirectoryItem'
import EduNoData from '@/components/EduNoData'
export default {
  components: {
    DirectoryItem,
    EduNoData
  },
  props: {
    course_id: {
      type: Number,
      default: 0
    },
    classId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      sectionList: [],
      sectionLevel: 0
    }
  },
  methods: {
    // 章节目录
    getCourseCatalog() {
      this.loading = true
      this.$api.getCourseSection(
        this.course_id,
        this.sectionLevel,
        {
          page: 1,
          count: 500,
          class_id: this.classId
        },
        res => {
          const { data } = res
          this.sectionList = data.section_info.data
          this.sectionLevel = data.section_level
          this.loading = false
        }
      )
    },
    // 目录子集列表内容
    async handleSectionChange(type, index, childIndex) {
      if (this.$util.isEmpty(this.sectionList[index].child) && type === 2) {
        this.loading = true
        let data = await this.$api.getCourseSection(
          this.course_id,
          this.sectionList[index].id,
          {
            page: 1,
            count: 500,
            class_id: this.classId
          },
          res => {
            const { data } = res
            return data
          }
        )
        this.$set(this.sectionList[index], 'child', data.section_info.data)
        this.loading = false
      } else if (type === 3) {
        if (this.$util.isEmpty(this.sectionList[index].child[childIndex].child)) {
          this.loading = true
          let data = await this.$api.getCourseSection(
            this.course_id,
            this.sectionList[index].child[childIndex].id,
            {
              page: 1,
              count: 999,
              class_id: this.classId
            },
            res => {
              const { data } = res
              return data
            }
          )
          this.$set(this.sectionList[index].child[childIndex], 'child', data.section_info.data)
          this.loading = false
        }
      }
    },
    handleChange() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 600)
    }
  },
  mounted() {
    this.getCourseCatalog()
  }
}
</script>

<style lang="scss" scoped>
.directory {
  ::v-deep .el-collapse {
    border-top: none;
    border-bottom: none;
    .el-icon-arrow-right:before {
      content: '\e791';
      @include edu-color-auxiliary;
      font-size: 20px;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .el-collapse-item__wrap {
      border-bottom: none;
    }
    .el-collapse-item__header.is-active {
      border-bottom-color: $border-color-divider;
    }
  }
  .ml15 {
    margin-left: 15px;
  }
  .directory-item {
    .directory-title {
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      padding-left: 12px;
      position: relative;
      @include ellipsis;
      max-width: 600px;
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -6px;
        width: 2px;
        height: 12px;
        @include edu-color-primary(background-color);
      }
    }
  }
}
</style>
